<template>
  <a-drawer
    title="设计表单"
    :maskClosable="false"
    :mask="true"
    width=100%
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="formVisible">
    <fm-making-form v-if="formVisible" ref="MakingForm" style="height: 900px;" upload preview clearable generateJson
                    :customFields="formMakingCustomPlugins"
                    :global-config="globalConfig">
      <template slot="action">
        <el-col :span="6"><el-input v-model="formData.formName" type="text" size="mini" placeholder="表单名称"/> </el-col>
        <el-button type="text" icon="el-icon-upload" @click="save">保存</el-button>
        <el-button type="text" icon="el-icon-close" @click="onClose">关闭</el-button>
      </template>
    </fm-making-form>
  </a-drawer>
</template>
<script>
import CustomPlugins from './FormMakingCustom'

const initJSON = '{"list":[],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"antd","layout":"horizontal","labelCol":3}}'

export default {
  initJSON,
  name: 'FormConfig',
  data () {
    return {
      formVisible: false,
      formMakingCustomPlugins: CustomPlugins.customFields,
      globalConfig: {
        dataSource: CustomPlugins.customDataSources
      },
      formData: {}, // formData 结构与T_FORM_DESIGN表一致
      onceFlag: true
    }
  },
  methods: {
    save () {
      this.loading = true
      if (!this.formData.formName) {
        this.$message.error('表单名称不可为空')
      } else {
        let tmpJson = JSON.stringify(this.$refs.MakingForm.getJSON())
        // 防止被XssFilter误杀，替换select字符，后台再还原
        this.formData.formJson = tmpJson
          .replaceAll('"type":"select"', '"type":"xssSelect"')
          .replaceAll('"icon":"icon-select"', '"icon":"icon-xssSelect"')
        this.formData.createdDate = undefined
        if (this.formData.formId === undefined) {
          this.add()
        } else {
          this.update()
        }
      }
    },
    add () {
      this.$post('form', {
        ...this.formData
      }).then((res) => {
        if (res.data.status) {
          this.$emit('success')
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.loading = false
        this.formVisible = false
      }).catch(() => {
        this.loading = false
      })
    },
    update () {
      this.$put('form', {
        ...this.formData
      }).then((res) => {
        if (res.data.status) {
          this.$message.success(res.data.message)
          this.$emit('success')
        } else {
          this.$message.error(res.data.message)
        }
        this.loading = false
        this.formVisible = false
      }).catch(() => {
        this.loading = false
      })
    },
    onOpen (formData) {
      this.formData = formData
      this.formVisible = true
      this.$nextTick(() => {
        try {
          console.log(formData)
          this.$refs.MakingForm.setJSON(this.formData.formJson)
        } catch (e) {
          this.$message.error(e.message)
          this.formVisible = false
        }
      })
    },
    onClose () {
      this.formVisible = false
    }
  }
}
</script>
